<template>
  <div :class="{ 'dynamics-cell': true }">
    <div @click="skip(item.id, item.type)" class="video">
      <template v-if="item.type == 1 || item.type === 'article'">
        <img :src="item.links[0]" />
      </template>
      <template v-if="item.type == 2">
        <img :src="item.cover" />
      </template>
      <div v-if="item.type === 'article'" class="article"></div>
      <div v-else class="play"></div>
      <!-- <div class="follow">你的关注</div> -->
    </div>
    <div class="info">
      <div class="info-text">{{ item.describe }}</div>
      <div v-if="item.type === 'article'" class="sub-text">
        <div class="left" v-if="item.hasOwnProperty('nickname')">
          <img :src="item.user.avatar" alt v-if="item.hasOwnProperty('avatar')" />
          {{ item.user.nickname }}
        </div>
        <div class="right">
          <img @click="like(item.id, $event)" src="@/assets/用户主页2-assets/icon2.png" v-if="isLike" />
          <img @click="like(item.id, $event)" src="@/assets/用户主页2-assets/icon3.png" v-else />
          <span class="zan">{{ item.like }}</span>
        </div>
      </div>
      <div v-else class="sub-text">
        <div class="left" @click="toUserPage(item)" v-if="item.hasOwnProperty('nickname')">
          <img :src="item.avatar" alt v-if="item.hasOwnProperty('avatar')" />
          {{ item.nickname }}
        </div>
        <div class="right">
          <img
            v-if="!isLike"
            @click="like(item.id, $event)"
            src="@/assets/用户主页2-assets/icon3.png"
            alt
          />
          <img v-else @click="like(item.id, $event)" src="@/assets/dianzan.png" alt />
          <span class="zan">{{ item.like }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendZan } from "@/api/dynamics";
export default {
  name: "",
  props: ["item"],
  data() {
    return {
      isLike: 0
    };
  },

  computed: {},

  watch: {
    item: {
      deep: true,
      handler: function(val) {
        if (val) {
          this.isLike = val.is_like;
        }
      }
    }
  },

  methods: {
    toUserPage(item) {
      this.$router.push({ name: "userPage", query: { user_id: item.user_id } });
    },
    //点赞
    like(dynamicsId, $event) {
      sendZan({
        id: dynamicsId
      }).then(res => {
        let state = res.data.data.type;
        let zan = $event.target.nextSibling;
        let zanNum = zan.innerText;
        if (state === 1) {
          zanNum++;
          zan.innerText = zanNum;
          this.isLike = 1;
        }
        if (state === 2) {
          zanNum--;
          zan.innerText = zanNum;
          this.isLike = 0;
        }
      });
    },
    //跳转动态详情
    skip(dynamicsDd, type) {
      if (type === "article") {
        this.$router.push({
          path: "/article-detail",
          query: { id: dynamicsDd }
        });
      } else {
        // window.location.href = `http://shop.zhixiu.vip/videofront/#/video-detail?id=203`
        this.$router.push({ path: "/video-detail", query: { id: dynamicsDd } });
      }
    }
  },

  created() {
    this.isLike = this.item.is_like;
  },

  components: {}
};
</script>
<style lang="less" scoped>
.dynamics-cell {
  background: #fff;
  border-radius: 0.12rem;
  overflow: hidden;
  margin-bottom: 0.2rem;
  width: 100%;
  .video {
    width: 100%;
    background-color: #dfdfdf;
    position: relative;
    .article {
      position: absolute;
      height: 1.12rem;
      width: 1.12rem;
      background-image: url("../../../assets/kll/shu.png");
      background-size: 100% 100%;
      top: 0.36rem;
      right: 0.36rem;
    }
    .play {
      position: absolute;
      height: 1.12rem;
      width: 1.12rem;
      background-image: url("../../../assets/用户主页2-assets/icon1.png");
      background-size: 100% 100%;
      top: 0.36rem;
      right: 0.36rem;
    }

    img {
      width: 100%;
    }

    .follow {
      position: absolute;
      bottom: 0.36rem;
      left: 0.36rem;
      color: #fff;
      font-size: 0.36rem;
      background: rgba(0, 120, 255, 1);
      width: 1.82rem;
      height: 0.68rem;
      text-align: center;
      line-height: 0.68rem;
      border-radius: 0.12rem;
    }
  }

  .info {
    padding: 0.4rem 0.36rem;

    .info-text {
      font-size: 0.52rem;
      font-family: "PingFang-SC-Bold";
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      height: 1.4rem;
      overflow: hidden;
    }

    .sub-text {
      display: flex;
      justify-content: space-between;
      color: #444444;
      margin-top: 0.32rem;

      .left {
        font-size: 0.52rem;

        img {
          width: 0.72rem;
          height: 0.72rem;
          vertical-align: middle;
          border-radius: 50%;
        }
      }

      .right {
        font-size: 0.48rem;

        img {
          width: 0.56rem;
          vertical-align: middle;
        }
        .zan {
          margin: 0 0.1rem;
        }
      }
    }
  }
}
</style>
